<template>
  <div class="container"
       :class=" isBg ?'bgClass':''">
    <ul class="dv">
      <li v-for="(item,index) in arrayBtn"
          :key="index"
          class="dv_item"
          :class="{'active' : currentIndex === index}"
          @click="checkTime(item,index)">
        {{item.value}}
      </li>
    </ul>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh"
                 v-if="evaluat_list.length > 0">
      <ul class="evaluation_list">
        <li class="eva_item clearfix"
            v-for="(item, i) in evaluat_list"
            :key="i">
          <div class="userInfo clearfix">
            <div class="left clearfix">
              <div class="user_logo">
                <img :src="item.headimgurl==''?defaultImg:imgUrl+item.headimgurl"
                     alt=""
                     mode="widthFix"
                     class="img">
              </div>
              <div class="user_board">
                <h3>{{item.user_name}} {{item.nickname}}</h3>
                <div class="right"
                     v-if="item.time">
                  {{item.time}}
                </div>
              </div>
            </div>
            <!-- 时间 -->
            <div class="score clearfix">
              <div class="item">
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="item.star==0.5"
                     class="star">
                <img :src="item.star>=1?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="item.star==1.5"
                     class="star">
                <img :src="item.star>=2?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="item.star==2.5"
                     class="star">
                <img :src="item.star>=3?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="item.star==3.5"
                     class="star">
                <img :src="item.star>=4?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img src="https://h5.ameimeika.com/mp_images/mp_2.4/half_star@2x.png"
                     v-if="item.star==4.5"
                     class="star">
                <img :src="item.star>=5?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
              </div>
              <span class="num1">{{item.star}}分</span>
            </div>
          </div>
          <div class="eva_content">
            {{item.contents}} {{item.comment}}
          </div>
          <ul class="img_list clearfix"
              v-if="item.image_arr[0]">
            <li class="img_item"
                v-for="(value, index) in item.image_arr"
                :key="index"
                @click="image_preview(item,index)">
              <img :src="imgUrl+value"
                   alt=""
                   class="img">
              <span class="tip"
                    v-if="item.total_image> 3 && index == 2">{{item.total_image}}</span>
            </li>
          </ul>
          <div class="like clearfix"
               @click="giveLike(item)">
            <img :src="item.is_praise ==false?ImgBaseUrl+'jifenshangcheng/pinglunye/dianzan-1@2x.png':ImgBaseUrl+'mp_2.0/jifenshangcheng/dianzanhou@2x.png'"
                 class="img"
                 mode="widthFix">
            {{item.praise}}
          </div>
        </li>

      </ul>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      evaluat_list: [],
      imgArray: [],
      mallId: "",
      star: "",
      pageNum: 1,
      isbottom: false,
      mark: true,
      arrayBtn: [
        {
          id: 3,
          value: "最新"
        },
        {
          id: 2,
          value: "好评"
        },
        {
          id: 1,
          value: "有图"
        }
      ],
      checkType: 3,
      currentIndex: 0,
      user_id: '',
      isBg: false,
    };
  },
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "全部反馈"
    });
    Object.assign(this.$data, this.$options.data());
    // options.id = 83
    this.mallId = options.id; //商品详情传过来的商品id
    this.isbottom = false;
    this.pageNum = 1;
    this.getData(this.mallId);
  },
  onShow () { },
  methods: {
    getData () {
      if (this.isbottom) {
        return false;
      }
      let obj;
      if (wx.getStorageSync("user_id")) {
        obj = {
          page: this.pageNum,
          pageSize: 10,
          project_id: this.mallId,
          flag: this.checkType,
          user_id: wx.getStorageSync("user_id")
        }
      } else {
        obj = {
          page: this.pageNum,
          pageSize: 10,
          project_id: this.mallId,
          flag: this.checkType,
          user_id: 0
        }
      }
      // 评论详情
      common.fly_post("api/v4_2/shop_project/comment_index", obj
        , msg => {
          let res = msg.data;
          if (res.status_code == 0) {
            let arr = res.data.data
            arr.forEach(element => {
              element.time = new Date(element.time * 1000).Format("yyyy-MM-dd");
              if (element.images) {
                element.image_arr = element.images;
                element.total_image = element.image_arr.length;
                // element.image_arr = element.image_arr.slice(0, 3);
                // console.log(element.image_arr)
              } else {
                element.image_arr = [];
                element.total_image = element.image_arr.length;
              }
            });
            if (res.data.data.length == 0 && this.pageNum > 1) {
              common.mmk_Loading(2, "已经到最底下了")
              // this.isBg = false;
              this.isbottom = true;
              return false;
            } else if (res.data.data.length == 0 && this.pageNum == 1) {  //没有评论
              this.isBg = true;
            } else if (res.data.data.length > 0 && this.pageNum == 1) {  //有评论
              this.isBg = false;
              this.evaluat_list = [];
              this.evaluat_list = res.data.data;
            } else if (res.data.data.length > 0 && this.pageNum > 1) {  //分页追加评论
              this.isBg = false;
              this.evaluat_list.push(...res.data.data);
            }

          } else {
            common.mmk_Loading(2, res.message)
            return false;
          }
        })
    },
    giveLike (e) {
      let that = this;
      common.fly_post("api/v4_2/beauty_project_order_comments/praise", {
        comment_id: e.id,
        type: 1
      }, msg => {
        let res = msg.data;
        if (res.status_code == 0) {
          // e.praise += 1;
          common.mmk_Loading(2, "点赞成功")
          that.isbottom = false;
          that.getData()
        } else {
          common.mmk_Loading(2, res.message)
          return false;
        }
      })
    },
    pullrefresh (e) {
      this.pageNum++;
      this.getData(this.pageNum);
    },
    image_preview (item, index) {
      let arr = item.image_arr,
        arr1 = [];
      arr.forEach(val => {
        val = this.imgUrl + val;
        arr1.push(val);
      });
      wx.previewImage({
        current: arr1[index], // 当前显示图片的http链接
        urls: arr1 // 需要预览的图片http链接列表
      });
    },
    checkTime (item, index) {
      this.isBg = false;
      this.evaluat_list = [];
      this.currentIndex = index;
      this.checkType = item.id;
      this.pageNum = 1;
      this.isbottom = false;
      this.getData(this.checkType);
    },
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background-color: #fbfbfb;
  .dv {
    width: 100%;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    color: #fff;
    background: #f3f4f6;
    padding-left: 15px;
    .dv_item {
      width: auto;
      height: 30px;
      box-sizing: border-box;
      font-size: 12px;
      color: #666;
      line-height: 30px;
      padding: 0 15px;
      background: #ffe6ea;
      border-radius: 15px;
      margin: 15px 10px 0 0;
      float: left;
      &.active {
        box-sizing: border-box;
        border: 1px solid #ff383e;
        color: #ff383e;
      }
    }
  }
  &.bgClass {
    background-image: url("https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 90%;
    background-position: 50% 30%;
    background-size: 40%;
  }
  .evaluation_list {
    padding-bottom: 50px;
    .eva_item {
      padding: 10px 15px;
      margin-bottom: 10px;
      background-color: #fff;
      .userInfo {
        .left {
          float: left;
          .user_logo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;
            margin-top: 3px;
            position: relative;
            overflow: hidden;
            .img {
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
            }
          }
          .user_board {
            float: left;
            margin-left: 10px;
            h3 {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
            .right {
              float: left;
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
          }
        }
        .score {
          width: auto;
          display: block;
          float: right;
          .item {
            width: 70px;
            height: 14px;
            overflow: hidden;
            display: inline-block;
            .star {
              width: 14px;
              height: 14px;
              float: left;
            }
          }
          .num1 {
            font-size: 10px;
            color: rgba(255, 147, 69, 1);
            margin-left: 6px;
            vertical-align: top;
            line-height: 14px;
          }
        }
      }
      .eva_content {
        font-size: 14px;
        color: rgba(136, 136, 136, 1);
        line-height: 20px;
        margin-top: 10px;
      }
      .img_list {
        height: 110px;
        margin-top: 10px;
        display: flex;
        columns: 3;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: hidden;

        .img_item {
          width: 102px;
          height: 102px;
          float: left;
          margin-right: 13.5px;
          position: relative;
          margin-bottom: 20px;
          .img {
            width: 102px;
            height: 102px;
          }
          .tip {
            display: block;
            width: 32px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-family: "PingFangSC-Medium";
            color: rgba(153, 153, 153, 1);
            border-radius: 8px;
            border: 1px solid rgba(151, 151, 151, 1);
            position: absolute;
            right: 6px;
            bottom: 6px;
            z-index: 999;
          }
        }
      }
    }
    .like {
      height: 28rpx;
      line-height: 28rpx;
      font-size: 24rpx;
      color: #666;
      margin-top: 22rpx;
      text-align: right;
      .img {
        width: 13px;
        height: 14px;
        vertical-align: bottom;
      }
    }
  }
}
</style>

